<script lang="ts"  setup>
// 需要先安装 naive-ui 依赖
// npm install naive-ui
// 或
// yarn add naive-ui
import { useMessage } from 'naive-ui'
const message = useMessage()

function info() {
  message.info("ssssssss")
}
</script>

<template>
  <div class="container">
    <h1>欢迎来到首页</h1>
    <div class="button-group">
      <NButton>Hello World</NButton>
      <NButton type="primary">
        Primary
      </NButton>
      <NButton @click="info">
        信息（Hover不消失）
      </NButton>
      <NButton type="info" to="/demo">
        查看Demo
      </NButton>
    </div>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}

.button-group {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
</style>